<template>
    <div>
      <el-form>
        <el-row :gutter="20">
            <el-col :span="12">
                <span class="col-span">请选择：</span>
                <el-select v-model="selectValue" placeholder="请选择" @change="changeSelect">
                    <el-option
                    v-for="(v,i) in selectList"
                    :key="i"
                    :label="v.name"
                    :value="v.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="12" style="text-align: right">
                <el-button @click="addTag()" type="primary">新增数据</el-button>
            </el-col>
        </el-row>
        <el-table
          :data="tableData"
          :header-cell-style="{background:'#eef1f6'}"
          v-loading="loading"
          border                                                                    
          style="width: 100%;margin-top: 20px">
          <el-table-column prop="id" width="100" align="center" label="#">
              <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
          </el-table-column>
          <el-table-column label="名称" align="center">
            <template slot-scope="scope">
                <el-form-item 
                    v-if="scope.row.isEdit"
                    :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                    prop="name">
                    <el-input v-model="scope.row.name" autocomplete="off"></el-input>
                </el-form-item>
                <span v-else>{{ scope.row.name }}</span> 
            </template> 
          </el-table-column>
          <el-table-column v-if="selectValue == 'technical_field'" prop="parent_display" width="200" align="center" label="父级领域">
              <template slot-scope="scope">
                <el-form-item 
                    v-if="scope.row.isEdit && scope.row.isAdd"
                    :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                    prop="display">
                    <el-cascader
                    v-model="scope.row.parent_list"
                    :options="singleParentsFilter"
                    collapse-tags
                    :props="{ checkStrictly: true }"
                    clearable></el-cascader>
                </el-form-item>
                <span v-else>{{ scope.row.parent_display }}</span> 
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="120">
            <template slot-scope="scope">
                <el-form-item 
                    v-if="scope.row.isEdit"
                    :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                    prop="status">
                    <el-select v-model="scope.row.status" placeholder="请选择">
                        <el-option label="正常" :value="1"></el-option>
                        <el-option label="停用" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <span v-else>{{ scope.row.status == 1 ? '正常' : '停用' }}</span>
            </template>
          </el-table-column>
          <el-table-column width="250" align="center" label="操作">
            <template slot-scope="scope">
                <div class="action-btn">
                <el-button v-if="!scope.row.isAdd" @click="tagChange(scope.row, scope.$index)" size="mini" :disabled="scope.row.isEdit" round type="success">修改</el-button>
                <el-button @click="tagSave(scope.row, scope.$index)" size="mini" round type="primary" :disabled="error || !scope.row.isEdit">保存</el-button>
                <el-button v-if="scope.row.isEdit" @click="tagCancel(scope.row, scope.$index)" size="mini" round type="warning">取消</el-button>
                </div>
            </template> 
          </el-table-column>
        </el-table>
        <el-pagination class="marT"
          v-show="dialogTotal > 10"
          :page-size="dialogSize"
          background                              
          @size-change="dialogSizeChange"
          @current-change="dialogCurrentChange"
          :current-page="dialogCurrent"                               
          layout="prev, pager, next"
          style="text-align: center"
          :total="dialogTotal">
        </el-pagination>
      </el-form>
    </div>
    
</template>

<script>
import { getHeaderName } from '@/app.config'
export default {
    name: 'Talent',
    props: {
        filterData: Object,
        loading: Boolean
    },
    data() {
        return {
            singleParentsFilter: [],
            error: false,
            selectValue: 'position',
            tableData: [],
            selectList: [{
                name: '工作岗位',
                value: 'position'
            },{
                name: '工作模式',
                value: 'working_mode'
            },
            // {
            //     name: '技术模块',
            //     value: 'technology_module'
            // },
            {
                name: '软件平台',
                value: 'software_platform'
            },{
                name: '业务领域',
                value: 'business_area'
            },{
                name: '编程语言',
                value: 'programing_language'
            },{
                name: '技术领域',
                value: 'technical_field'
            }],
            dialogCurrent: 1,
            dialogSize: 10,
            dialogTotal: 0,
        }
    },
    mounted() {
        this.initSingleFilter()
        if(this.selectValue == 'technical_field') {
            this.initSingleTable()
        } else {
            this.initTable()
        }
    },
    methods: {
        initTable() {
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/' +  this.selectValue,
                method: "get",
                headers: getHeaderName(),
                params: {
                    pageNo: this.dialogCurrent,
                    pageSize: this.dialogSize
                }
            }).then(res => {
                this.tableData = res.data.data.data
                this.dialogTotal = res.data.data.totalCount
                if(this.tableData) {
                    this.tableData.forEach(val => {
                        val.isEdit = false
                    })
                }
            })
        },
        initSingleTable() {
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field',
                method: "get",
                headers: getHeaderName(),
                params: {
                    pageNo: this.dialogCurrent,
                    pageSize: this.dialogSize
                }
            }).then(res => {
                this.tableData = res.data.data.data
                this.dialogTotal = res.data.data.totalCount
                if(this.tableData) {
                    this.tableData.forEach(val => {
                        val.isEdit = false
                    })
                }
            })
        },
        initSingleFilter() {
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field/tree',
                method: "get",
                headers: getHeaderName(),
            }).then(res => {
                this.singleParentsFilter = res.data.data
            })
                },
        changeSelect() {
            this.dialogCurrent = 1
            this.dialogSize = 10
            this.dialogTotal = 0
            if(this.selectValue == 'technical_field') {
                this.initSingleTable()
            } else {
                this.initTable()
            }
            
        },
        dialogCurrentChange(val) {
            this.dialogCurrent = val
            if(this.selectValue == 'technical_field') {
                this.initSingleTable()
            } else {
                this.initTable()
            }
        },
        dialogSizeChange(val) {
            this.dialogSize = val
            if(this.selectValue == 'technical_field') {
                this.initSingleTable()
            } else {
                this.initTable()
            }
        },
        tagChange(row, index) {
            row.isEdit = true
            this.$set(this.tableData, index, row)
        },
        tagCancel(row, index) {
            row.isEdit = false
            this.$set(this.tableData, index, row)
            this.initTable()
        },
        tagSave(row, index) {
            let obj = {}
            let url = ''
            obj['status'] = row.status
            obj['name'] = row.name
            if(this.selectValue == 'technical_field') {
                obj['parent_id'] = row.parent_list ? row.parent_list[row.parent_list.length - 1] : 0
            }
            if(row.isAdd) {
                url = `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/filter/${this.selectValue}`
            } else {
                url = `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/filter/${this.selectValue}/${row.id}`
            }

            this.$axios({
                url: url,
                method: "post",
                headers: getHeaderName(),
                data: obj
            }).then(res => {
                if(res.data.code == 200) {
                  this.$message.success(res.data.message)
                    if(this.selectValue == 'technical_field') {
                        this.initSingleTable()
                    } else {
                        this.initTable()
                    }
                  this.initSingleFilter()
                  this.$emit('changeConfig')
                } else {
                  this.$message.error(res.data.message)
                }
                
            })
        },
        addTag() {
            this.tableData.push({
                name: '',
                status: 0,
                isEdit: true,
                isAdd: true
            })
        }   

    },
    watch: {

    }
}
</script>
<style lang="scss" scoped>
.form-box {
    padding: 0 20px 20px 20px;
}
.form-title {
    font-size: 18px;
    margin: 10px 0 30px 0;
}
.form-item {
    display: flex;
    min-height: 50px;
}
.form-btn {
    text-align: right;
}
.el-tag + .el-tag {
    margin-left: 10px;
}
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
.action-btn {
    margin-right: 10px;
}
</style>


